<template>
  <div class="activity-detail-container">
    <a-spin :loading="spinLoading" :size="35" class="w-full" tip="正在加载活动详情...">
      <div class="max-w-4xl mx-auto px-4 py-6 space-y-8">
        <!-- 活动标题区域 -->
        <div class="text-center space-y-4">
          <h1 class="text-2xl md:text-4xl font-bold text-gray-800 leading-tight">
            {{ form.activityTitle }}
          </h1>
          <div v-if="form.activityTop === proxy.yesNo.yes.key" class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
            <icon-fire class="w-4 h-4 mr-1" />
            置顶活动
          </div>
        </div>

        <!-- 元信息区域 -->
        <div class="bg-gray-50 rounded-lg p-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600">
            <div class="flex items-center space-x-2">
              <icon-calendar class="w-4 h-4 text-green-500" />
              <span>发布时间：</span>
              <span class="font-medium text-gray-800">{{ form.publishTime }}</span>
            </div>
            <div class="flex items-center space-x-2">
              <icon-tag class="w-4 h-4 text-orange-500" />
              <span>状态：</span>
              <dict-convert
                :dict-data="dicts[proxy.DICT.commonNumberStatus]"
                :dict-key="form.status"
                class="font-medium text-gray-800"
              />
            </div>
          </div>
        </div>



        <!-- 活动内容区域 -->
        <div class="space-y-4">
          <a-divider class="my-6" />
          <div class="prose prose-lg max-w-none" v-html="form.activityContent"></div>
        </div>

        <!-- 底部信息 -->
        <div class="border-t pt-6 mt-8">
          <div class="flex flex-wrap items-center justify-between text-sm text-gray-500 space-y-2">
            <div class="flex items-center space-x-4">
              <span>创建人：
                <dict-convert
                  :dict-data="dicts[proxy.DICT.userList]"
                  :dict-key="form.createId"
                  class="font-medium"
                />
              </span>
              <span>创建时间：{{ form.createTime }}</span>
            </div>
            <div v-if="form.activitySort" class="text-xs bg-gray-100 px-2 py-1 rounded">
              排序：{{ form.activitySort }}
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<style scoped>
.activity-detail-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 内容区域样式 */
.prose {
  color: #374151;
  line-height: 1.75;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: #1f2937;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.prose p {
  margin-bottom: 1.25rem;
}

.prose img {
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin: 1.5rem auto;
}

.prose blockquote {
  border-left: 4px solid #3b82f6;
  background: #f8fafc;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0.375rem;
}

.prose ul, .prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  overflow: hidden;
}

.prose th, .prose td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.prose th {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
}

.prose code {
  background: #f1f5f9;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  color: #1e293b;
}

.prose pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.prose pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .activity-detail-container .max-w-4xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .prose {
    font-size: 0.875rem;
  }
  
  .prose h1 {
    font-size: 1.5rem;
  }
  
  .prose h2 {
    font-size: 1.25rem;
  }
  
  .prose h3 {
    font-size: 1.125rem;
  }
}

/* 轮播图样式优化 */
:deep(.arco-carousel-indicator-wrapper) {
  bottom: 1rem;
}

:deep(.arco-carousel-indicator-item) {
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
}

:deep(.arco-carousel-indicator-item-active) {
  background: #3b82f6;
  border-color: #3b82f6;
}

:deep(.arco-carousel-arrow) {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
}

:deep(.arco-carousel-arrow:hover) {
  background: rgba(0, 0, 0, 0.7);
}

/* 图片预览优化 */
:deep(.arco-image-img) {
  transition: transform 0.3s ease;
}

:deep(.arco-image-img:hover) {
  transform: scale(1.02);
}

/* 加载动画优化 */
:deep(.arco-spin-loading) {
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.8);
}
</style>

<script setup>
import {getCurrentInstance, reactive, ref, watch} from "vue";
import {getActivityByActivityIdApi} from "~/api/lindi/activity.js";
import {IconCalendar, IconTag, IconFire} from "@arco-design/web-vue/es/icon";
import "tinymce/skins/ui/oxide/content.css";
import "tinymce/skins/ui/oxide/skin.css";

//全局实例
const {proxy} = getCurrentInstance();
//加载字典
const dicts = proxy.LoadDicts([
  proxy.DICT.commonNumberStatus,
  proxy.DICT.yesNo,
  proxy.DICT.userList,
]);
//加载中...
const spinLoading = ref(false);

//接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {
    },
  },
});
//表单
const form = reactive({
  //活动ID
  activityId: null,
  //活动标题
  activityTitle: null,
  //活动内容
  activityContent: null,
  //是否置顶
  activityTop: null,
  //排序值
  activitySort: null,
  //发布时间
  publishTime: null,
  //活动状态
  status: null,
  //创建人
  createId: null,
  //创建时间
  createTime: null,
});
//加载活动详细信息
const loadActivityInfo = (activityId) => {
  if (!activityId) {
    proxy.$msg.error("活动ID不能为空");
    return;
  }

  spinLoading.value = true;
  getActivityByActivityIdApi(activityId)
      .then((res) => {
        //数据赋值
        if (res) {
          for (let key in res) {
            if (form.hasOwnProperty(key)) {
              form[key] = res[key];
            }
          }

        } else {
          proxy.$msg.error("活动数据为空");
        }
      })
      .catch((error) => {
        console.error("加载活动详情失败:", error);
        const errorMsg =
          error?.response?.data?.message ||
          error?.message ||
          "加载活动详情失败，请重试";
        proxy.$msg.error(errorMsg);
      })
      .finally(() => {
        spinLoading.value = false;
      });
};
//监听参数变化
watch(
    () => props.params,
    (newVal, oldVal) => {
      //活动ID
      if (props.params.activityId) {
        //查询数据
        loadActivityInfo(props.params.activityId);
      }
    },
    {deep: true, immediate: true}
);
</script>
<style scoped></style>